<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/utils.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> 
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    
</head> 
<body>
    <div class="head">
        <div class="center">
            <ul>
                <li class="li1"> 首页</li>
                <li>华为官网</li>
                <li>花粉俱乐部</li>
                <li>V码(优购码)</li>
                <li>企业购</li>
                <li>Select&nbsp;Region</li>
                <li class="list1">更多精彩 <span class="on iconfont icon-jiantou-copy-copy-copy"></span> <span class="off iconfont icon-jiantou"></span>
                    <div class="ld">
                        <p>HarmonyOS</p>
                        <p>应用市场</p>
                        <p>华为终端云空间</p>
                        <p>开发者联盟</p>
                    </div>
                </li>
            </ul>
            <ol>
                <li class="li1">
                    <span>请登录</span><span>注册</span>
                </li>
                <li>我的订单</li>
                <li class="list1">客户服务
                    <span class="on iconfont icon-jiantou-copy-copy-copy"></span> <span class="off iconfont icon-jiantou"></span>
                    <div class="ld">
                        <p>服务中心</p>
                        <p>联系客服</p>
                    </div>
                </li>
                <li class="list1">网站导航
                    <span class="on iconfont icon-jiantou-copy-copy-copy"></span> <span class="off iconfont icon-jiantou"></span>
                    <div class="ld best">
                        <table>
                            <thead>
                                <tr>
                                    <td></td>
                                    <td>频道</td>
                                    <td></td>
                                    <td>产品</td>
                                    <td></td>
                                    <td>增值服务</td>
                                    <td></td>
                                    <td>会员</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td></td>
                                    <td>华为专区</td>
                                    <td>企业购</td>
                                    <td>手机</td>
                                    <td>笔记本</td>
                                    <td>以旧换新</td>
                                    <td>不够社保</td>
                                    <td>会员频道</td>
                                </tr>
                                <tr>
                                    <td>商城首页</td>
                                    <td>教育优惠</td>
                                    <td>h123456123</td>
                                    <td>平板</td>
                                    <td>智能穿戴</td>
                                    <td>一口价换电池</td>
                                    <td>音频延保</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>智能家居</td>
                                    <td>智慧屏</td>
                                    <td>穿戴延保</td>
                                    <td>只会屏全质保</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>耳机音响</td>
                                    <td>热销配件</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>生态产品</td>
                                    <td>增值服务</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </li>
                <li class="list1">手机版
                    <span class="on iconfont icon-jiantou-copy-copy-copy"></span> <span class="off iconfont icon-jiantou"></span>
                    <div class="ld">
                        <img style="width: 200px;" src="https://img0.baidu.com/it/u=329169822,1509657486&fm=26&fmt=auto&gp=0.jpg" alt="">
                    </div>
                </li>
                <li class="list1"><span class="iconfont icon-tianchongxing-"></span>购物车</li>
            </ol>
        </div> 
    </div>
    <div class="search">
        <div class="logo">
            <ul>
                <li><img src="https://res.vmallres.com/pimages//common/config/logo/SXppnESYv4K11DBxDFc2.png" alt="" style="width: 205px;"></li>
                <li class="logo-li">华为专区</li>
                <li>莫塞尔专区</li>
                <li>华为智选</li>
                <li>鸿蒙智联</li>
                <li>福利中心</li>
            </ul>
            <div class="s-right">
                <form action="">
                    <input type="text">
                    <button><span>0.0</span></button>
                </form>
            </div>
        </div>
        
    </div>
    <div class="swiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination" style="top: 70%; right: 10%;"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="left">
                <div class="swiper-button-prev"></div>
            </div>
            <div class="right">
                <div class="swiper-button-next"></div>
            </div>
            
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
            <div class="nav">
                <ul>
                    <li >手机</li>
                    <li>只能穿戴&VR</li>
                    <li>耳机音响眼镜</li>
                    <li>只会屏</li>
                    <li>电脑</li>
                    <li>平板</li>
                    <li>智能路由</li>
                    <li>配件</li>
                    <li>生态产品</li>
                    <li>家用电器</li>
                    <li>美食酒饮</li>
                    <li>增值服务%企业商用</li>
                </ul>
                <ol class="ol-list">
                    <li><img src="https://res.vmallres.com/20200731/images/echannel/icon/icon5.gif" alt="">
                        <span>123132132</span>
                    </li>
                </ol>
            </div>
        </div>
        
    </div>

    <div class="main">
        <div class="m-center">
            <div class="m-head">
                <div class="m-c-head">
                    <ul>
                        <li>
                            <span class="iconfont icon-doctorial-fill"></span>
                            <div class="li1">
                                <p class="p1"><span style="color: #bbb;">您好,请</span><a href="./reg.html">&nbsp;注册</a>&nbsp;/&nbsp;<a href="./login.html">登录</a></p>
                                <p class="p2">
                                    <span style=" color: red; margin-right: 15px;">新人福利</span>
                                    <span style="background: rgba(64, 62, 34, 0.748); border: none; color: rgb(238, 250, 7);">会员频道</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <p><span class="iconfont icon-tubiaozhizuomoban-03"></span><span>企业购</span></p>
                            <p><span class="iconfont icon-icon-test"></span><span>会员领券</span></p>
                            <p><span class="iconfont icon-jiaohuan"></span><span>以旧换新</span></p>
                            <p><span class="iconfont icon-doctorial-fill"></span><span>教育商店</span></p>
                            <p><span class="iconfont icon-new"></span><span>新品首发</span></p>
                            <p><span class="iconfont icon-lujing133"></span><span>智能家居</span></p>
                        </li>
                        <li>
                            <p>公告</p>
                            <p class="p-list">
                                <span><span class="iconfont icon-icon-test"></span> 优购码</span>
                                <span><span class="iconfont icon-jiaohuan"></span>更换电池</span>
                                <span><span class="iconfont icon-new"></span>补够保障</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="f-img">
                <a href=""><img src="https://res.vmallres.com/pimages//pages/picImages/44965786572618756944.png" alt=""></a>
                <a href=""><img src="https://res.vmallres.com/pimages//pages/picImages/76598250242615289567.jpg" alt=""></a>
                <a href=""><img src="https://res.vmallres.com/pimages//pages/picImages/67722491932619422776.jpg" alt=""></a>
                <a href=""><img src="https://res.vmallres.com/pimages//pages/picImages/14953027482612035941.jpg" alt=""></a>
            </div>
            <p style="font-size: 26px;">热品单销</p>
            <div class="e-img">
                <a href="" style="display: block;width: 230px; height: 592px;"><img style="width: 230px; height: 592px;" src="https://res0.vmallres.com/pimages//frontLocation/content/89674719082611747698.jpg" alt=""></a>
                <div class="eight">
                    <div>
                        <p style="background: red; width: 60px; margin-left: 80px;">12313</p>
                        <img src="https://res0.vmallres.com/pimages//product/6941487227631/428_428_7A9C64F5992008436220F98539AF44BB2330BF4B9D07430Bmp.png" alt="">
                        <p class="e-img-p" style="font-size: 16px;">123</p>
                        <p style="font-size: 14px; color: #aaa;">123</p>
                        <p style="font-size: 14px;color: red; margin-top: 5px;">123</p>
                    </div>
                </div>
            </div>
            <p style="font-size: 26px; margin-top: 30px; margin-bottom: 20px;">精品推荐</p>
            <div class="five">
                <div> 
                    <div class="top">
                        <p style="background: red; width: 60px; margin-left: 72px;">12313</p>
                        <img src="https://res0.vmallres.com/pimages//product/6941487227631/428_428_7A9C64F5992008436220F98539AF44BB2330BF4B9D07430Bmp.png" alt="">
                        <p  style="font-size: 16px;background-color: #f9f9f9; height: 40px;;margin-top: 20px; line-height: 40px;">123</p>
                    </div>
                    <p style="font-size: 14px; color: #aaa;">123</p>
                    <p style="font-size: 14px;color: red; margin-top: 5px;">123</p>
                </div>
            </div>
        </div>
    </div>
</body>

    <script src="../data/data.js"></script>
    <script src="../js/index.js"></script>
    
    
</html>